<template>
	<view class="page tn-safe-area-inset-bottom">
		<view class="top-bg"></view>

		<!-- 顶部自定义导航 -->
		<!-- <tn-nav-bar fixed customBack>
			<view slot="back" class='tn-custom-nav-bar__back'>
				<text class='icon tn-icon-left' @click="goBack"></text>
				<text class='icon tn-icon-home-capsule-fill' @click="goHome"></text>
			</view>
			<view class="custom-nav-title">
				<text>新增驾驶证</text>
			</view>
		</tn-nav-bar> -->
		<view v-if="!successShow" class="page-container" style="padding-bottom: 110rpx;">
			<form @submit="orderCreate" report-submit='true'>
				<view class="tn-bg-white dawn-shadow dawn-radius">
					<view class="tn-padding">
						<view class="tn-flex tn-flex-row-between tn-flex-col-center">
							<view class="tn-flex justify-content-item">
								<view class=" tn-text-center"
									style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
									<text class="tn-icon-menu-alone-fill" style="font-size: 30rpx;"></text>
								</view>
								<view class="tn-text-lg tn-padding-right-xs">业务类型</view>
							</view>
							<view @click="showSelect" class="justify-content-item tn-text-df tn-color-grey">
								<text class="tn-padding-xs">{{selectResult}}</text>
								<text class="tn-icon-right"></text>
								<!-- select -->
								<tn-select
								  v-model="show"
								  title="请选择业务类型"
								  :list="list"
								  :maskCloseable="maskCloseable"
								  @cancel="cancelSelect"
								  @confirm="confirmSelect">
								</tn-select>
							</view>
						</view>
					</view>
					<view class='dawn-line'></view>

					<view class="tn-padding">
						<view class="tn-flex tn-flex-row-between tn-flex-col-center">
							<view class="tn-flex justify-content-item">
								<view class=" tn-text-center"
									style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
									<text class="tn-icon-my-circle-fill" style="font-size: 30rpx;"></text>
								</view>
								<view class="">
									<text class="tn-text-lg tn-padding-right-xs">姓名</text>
									<text class="tn-text-xs tn-padding-right-xs tn-color-grey">贷款人姓名</text>
								</view>
							</view>
							<view class="justify-content-item tn-text-df tn-color-grey" >
								<text class="tn-padding-xs"></text>
								<text class="tn-icon-tip-fill"></text>
							</view>
						</view>
						<view class="tn-margin-top-sm tn-bg-gray--light"
							style="border-radius: 10rpx;padding: 20rpx 30rpx;">
							<input placeholder="请填写姓名" name="name" placeholder-style="color:#AAAAAA"></input>
						</view>
					</view>
					<view class='dawn-line'></view>

					<view class="tn-padding">
						<view class="tn-flex tn-flex-row-between tn-flex-col-center">
							<view class="tn-flex justify-content-item">
								<view class=" tn-text-center"
									style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
									<text class="tn-icon-identity-fill" style="font-size: 30rpx;"></text>
								</view>
								<view class="">
									<text class="tn-text-lg tn-padding-right-xs">身份证号</text>
									<text class="tn-text-xs tn-padding-right-xs tn-color-grey">贷款人身份证号</text>
								</view>
							</view>
							<view class="justify-content-item tn-text-df tn-color-grey">
								<text class="tn-padding-xs"></text>
								<text class="tn-icon-tip-fill"></text>
							</view>
						</view>
						<view class="tn-margin-top-sm tn-bg-gray--light"
							style="border-radius: 10rpx;padding: 20rpx 30rpx;">
							<tn-input  type="text" :disabled="true"  placeholder="请填写身份证号"
								 @click="showKeyboard('card')" :value="idCardNo" name="idCardNo" placeholder-style="color:#AAAAAA"></tn-input>
						</view>
					</view>
					<view class='dawn-line'></view>

					<view class="tn-padding">
						<view class="tn-flex tn-flex-row-between tn-flex-col-center">
							<view class="tn-flex justify-content-item">
								<view class=" tn-text-center"
									style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
									<text class="tn-icon-phone-fill" style="font-size: 30rpx;"></text>
								</view>
								<view class="">
									<text class="tn-text-lg tn-padding-right-xs">手机号码</text>
									<text class="tn-text-xs tn-padding-right-xs tn-color-grey">贷款人手机号码</text>
								</view>
							</view>
							<view class="justify-content-item tn-text-df tn-color-grey">
								<text class="tn-padding-xs"></text>
								<text class="tn-icon-tip-fill"></text>
							</view>
						</view>
						<view class="tn-margin-top-sm tn-bg-gray--light"
							style="border-radius: 10rpx;padding: 20rpx 30rpx;">
							<tn-input  type="text" :disabled="true"  placeholder="请填写手机号码"
									 @click="showKeyboard('number')" :value="mobile" name="mobile" placeholder-style="color:#AAAAAA"></tn-input>
							
							<!-- <input placeholder="请填写手机号码" @focus="showKeyboard('number')" :value="mobile" name="mobile" placeholder-style="color:#AAAAAA"></input> -->
						</view>
					</view>
					<view class='dawn-line'></view>
					<view class="tn-padding">
						<view class="tn-flex tn-flex-row-between tn-flex-col-center">
							<view class="tn-flex justify-content-item">
								<view class=" tn-text-center"
									style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
									<text class="tn-icon-location-fill" style="font-size: 30rpx;"></text>
								</view>
								<view class="tn-text-lg tn-padding-right-xs">所在城市</view>
							</view>
							<view  @click="showPicker" class="justify-content-item tn-text-df tn-color-grey">
								<text class="tn-padding-xs">{{selectRegion}}</text>
								<text class="tn-icon-right"></text>
								<!-- 地区picker -->
								<tn-picker
								  v-model="pickerShow"
								  mode="region"
								  :defaultRegin="defaultRegin"
								  @confirm="regionPickerConfirm"
								></tn-picker>
							</view>
						</view>
					</view>
					<view class='dawn-line'></view>
					<view class="tn-padding">
						<view class="tn-flex tn-flex-row-between tn-flex-col-center">
							<view class="tn-flex justify-content-item">
								<view class=" tn-text-center"
									style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
									<text class="tn-icon-map-fill" style="font-size: 30rpx;"></text>
								</view>
								<view class="">
									<text class="tn-text-lg tn-padding-right-xs">详细地址</text>
									<text class="tn-text-xs tn-padding-right-xs tn-color-grey">贷款人详细地址</text>
								</view>
							</view>
							<view class="justify-content-item tn-text-df tn-color-grey" >
								<text class="tn-padding-xs"></text>
								<text class="tn-icon-tip-fill"></text>
							</view>
						</view>
						<view class="tn-margin-top-sm tn-bg-gray--light"
							style="border-radius: 10rpx;padding: 20rpx 30rpx;">
							<input  placeholder="请填写详细地址" name="address" placeholder-style="color:#AAAAAA"></input>
						</view>
					</view>
					<view class='dawn-line'></view>

					<view class="tn-padding">
						<view class="tn-flex tn-flex-row-between tn-flex-col-center">
							<view class="tn-flex justify-content-item">
								<view class=" tn-text-center"
									style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
									<text class="tn-icon-topics-fill" style="font-size: 30rpx;"></text>
								</view>
								<view class="">
									<text class="tn-text-lg tn-padding-right-xs">备注</text>
									<text class="tn-text-xs tn-padding-right-xs tn-color-grey">业务办理备注</text>
								</view>
							</view>
							<view class="justify-content-item tn-text-df tn-color-grey" >
								<text class="tn-padding-xs"></text>
								<text class="tn-icon-tip-fill"></text>
							</view>
						</view>
						<view class="tn-margin-top-sm tn-bg-gray--light"
							style="border-radius: 10rpx;padding: 20rpx 30rpx;">
							<textarea name="mark" maxlength="500" placeholder="请输入备注" placeholder-style="color:#AAAAAA"></textarea>
						</view>
					</view>


					<!-- 悬浮按钮-->
					<view class="tn-flex tn-footerfixed">
						<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
							<tn-button formType="submit" backgroundColor="#3571BB" padding="40rpx 0" width="70%" shadow fontBold>
								<!-- <text class="tn-icon-light tn-padding-right-xs tn-color-black"></text> -->
								<text class="tn-color-white">提 交</text>
								<text class="tn-icon-topics tn-padding-left-xs tn-color-white"></text>
							</tn-button>
						</view>
					</view>

				</view>
			</form>
		</view>
		
		
		<view class="page-container" v-if="successShow">
			<view class="tn-bg-white dawn-radius dawn-shadow tn-padding">
			  <tn-empty icon="tip-fill" iconColor="#3571BB" :iconSize='120' :textSize='40' textColor="#000000" text="无数据">
				<text>您还未实名认证！</text>
				<tn-button @click="nav('/hosp/users/certification')" shadow fontBold shape="round" margin="10rpx 0" 
					fontColor="#FFFFFF" backgroundColor="tn-bg-orangered" width="70vw" height="80rpx">
					<text class="tn-icon-edit-form tn-text-lg">认 证</text>
				</tn-button>
			  </tn-empty>
			</view>
		</view>
		
		<!-- 压屏窗 loading-->
		<tn-landscape
		  :show="loading"
		  :closeBtn="false"
		  :mask="true"
		  :maskCloseable="false">
		  <tn-loading show="show" :size="70" color="#3571BB"></tn-loading>
		</tn-landscape>
		
		<!-- 键盘 -->
		<tn-keyboard v-model="keyboardShow" :mode="mode" :dotEnabled="false" :randomEnabled="false"
			:switchEnMode="true" :tooltip="true" :mask="true" @change="onChange" @cancel="onCancel"
			@confirm="onConfirm" @backspace="onBackspace"></tn-keyboard>
	</view>
</template>

<script>
	import page_mixin from '@/mixins/page_mixin.js'
import { isIdCard } from '@/utils/validate.js'
	import {
		mapGetters
	} from "vuex";
	const app = getApp();
	export default {
		name: 'create',
		mixins: [page_mixin],
		computed: mapGetters(['uid', 'isLogin', 'userInfo']),
		data() {
			return {
				keyboardShow: false,
				mode: 'number',
				loading:false,
				successShow:true,
				pickerShow:false,
				show: false,
				mobile:'',
				idCardNo:'',
				region:"",
				selectRegion:"云南省-昆明市-五华区",
				defaultRegin:['云南省','昆明市','五华区'],
				maskCloseable: true,
				selectResult:'请选择业务类型',
				selectGoods:{},
				selectGoodsSku:{},
				list_goods: [],
				list: []
			}
		},
		onLoad() {
			console.info(this.isLogin);
			if (!this.isLogin) {
				toLogin();
				return;
			}
			this.getGoods();
		},
		methods: {
			orderCreate: function(e) {
				const formData = e.detail.value
				if (!this.selectGoodsSku.id) {
					return this.$util.Tips({
						title: '请选择业务类型'
					});
				}
				if (!formData.name) {
					return this.$util.Tips({
						title: '贷款人姓名不能为空'
					});
				}
				if (!this.idCardNo) {
					return this.$util.Tips({
						title: '贷款人身份证号不能为空'
					});
				}
				if (!isIdCard(this.idCardNo)) {
					return this.$util.Tips({
						title: '请输入正确的身份证号'
					});
				}
				if (!this.mobile) {
					return this.$util.Tips({
						title: '贷款人手机号码不能为空'
					});
				}
				if (!formData.address) {
					return this.$util.Tips({
						title: '贷款人地址不能为空'
					});
				}
				
				formData.address = this.selectRegion +'-'+formData.address;
				
				console.table(this.selectGoodsSku);
				const orderData = {
				  items: [
					  {
						  skuId:this.selectGoodsSku.id,
						  count:1,
						  cartId:0
					  }
				  ],
				  userId: this.uid,
				  receiverName: formData.name,
				  receiverMobile: this.mobile,
				  idCardNo: this.idCardNo,
				  address: formData.address,
				  mark: formData.mark,
				  deliveryType: 3,
				  addressId: undefined,
				  pickUpStoreId: undefined,
				  couponId: undefined,
				  pointStatus: false,
				  seckillActivityId: undefined,
				  bargainRecordId: undefined,
				  combinationActivityId: undefined
				}
				
				console.table(orderData);
				this.loading = true;
				
			},
			getGoods() {
				// ProductSpuApi.getSpuList('').then(res => {
				// 	const good_list = res.data || [];
				// 	if (good_list.length <= 0) {
				// 		return;
				// 	}
				// 	this.$set(this, 'list_goods', good_list);
				// 	const goodArray = [];
				// 	for (let i = 0; i < good_list.length; i++) {
				// 		let item = good_list[i];
				// 		console.table(item);
				// 		const select = {};
				// 		select.value = item.id;
				// 		select.label = item.name;
				// 		this.list.push(select);
				// 	}
				// });
			},
			// 打开压屏窗
			openLandscape() {
			  this.show = true
			},
			// 打开Select
			showPicker() {
				this.pickerShow = true;
			},
			// 点击地区选择器
			regionPickerConfirm(event) {
			  this.selectRegion = event.province.label + '-' + event.city.label + '-' + event.area.label
			},
			// 弹出Select
			showSelect(event) {
				this.openSelect()
			},
			// 打开Select
			openSelect() {
				this.show = true;
			},
			// 点击取消按钮
			cancelSelect(event) {
			  this.show = false;
			},
			// 点击确认按钮
			confirmSelect(event) {
			  this.selectResult = event[0]['label'];
			  const selectId = event[0]['value'];
			  for (let i = 0; i < this.list_goods.length; i++) {
			  	let item = this.list_goods[i];
			  	if(selectId === item.id){
					this.$set(this, 'selectGoods', item);
				}
			  }
			  // ProductSpuApi.getSpuDetail(this.selectGoods.id).then(res => {
			  //   this.$set(this, 'selectGoodsSku', res.data.skus[0]);
			  // }).catch(err => {
			  //   uni.hideLoading();
			  // })
			},
			// 弹出键盘
			showKeyboard(mode) {
				// uni.hideKeyboard();
				this.keyboardShow = true;
				this.mode = mode;
			},
			// 键盘输入值改变
			onChange(e) {
				if (this.mode === 'number') {
					this.mobile += e
				} else if (this.mode === 'card') {
					this.idCardNo += e
				}
			},
			// 点击了取消按钮
			onCancel() {
				this.keyboardShow = false
				if (this.mode === 'number') {
					this.mobile = '';
				} else if (this.mode === 'card') {
					this.idCardNo = ''
				}
			},
			// 点击了确认按钮
			onConfirm() {
				this.keyboardShow = false
			},
			// 点击了退格按钮
			onBackspace() {
				if (this.mode === 'number') {
					if (!this.mobile) {
						return
					}
					this.mobile = this.mobile.substring(0, this.mobile.length - 1)
				} else if (this.mode === 'card') {
					if (!this.idCardNo) {
						return
					}
					this.idCardNo = this.idCardNo.substring(0, this.idCardNo.length - 1)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>

</style>